<template>
  <div class="song-collect">
    <div class="item" v-for="(item, index) in collects" :key="index">
      <img :src="$filters.formatImgSize(item.avatarUrl, 100)" alt="404" />
      <p>{{ item.nickname }}</p>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { getSongCollect } from '@/service/song-sheet'

export default defineComponent({
  props: {
    songId: {
      type: Number,
      required: true
    }
  },
  setup() {
    // 获取歌单收藏者数据 ps:接口只能返回30条数据，暂不能做分页
    const collects = ref<any>([])
    function getCollesct(id: number, offset = 0, limit = 30) {
      getSongCollect(id, offset, limit).then((res: any) => {
        collects.value = res.subscribers
      })
    }

    return {
      collects,
      getCollesct
    }
  }
})
</script>

<style scoped lang="less">
.song-collect {
  display: flex;
  flex-wrap: wrap;
  .item {
    width: 120px;
    height: 120px;
    margin: 10px;
    overflow: hidden;
    font-size: 13px;
    color: red;
    text-align: center;

    img {
      border-radius: 50%;
      width: 90px;
      height: 90px;
    }
  }
}
</style>
